import React, { Component } from 'react';
import { Card, Form, Input, Button } from 'antd';
import qs from 'qs';
import { postSite, getSiteDetail } from 'Services/publicServer.js';

const FormItem = Form.Item;
const { TextArea } = Input;

@Form.create()
export default class siteDetails extends Component {
  constructor(props) {
    super(props);
    window.scope = this;
  }

  state = {
    list: {},
  };

  componentDidMount() {
    this.getSiteData();
  }

  getSiteData = async () => {
    const { type, id } = this;
    if (type === 'add') return false;
    const { setFieldsValue } = this.props.form;
    const res = await getSiteDetail({ id });
    this.setState({ list: res.data });
    const { id: _, ...obj } = res.data;
    if (type === 'edit') setFieldsValue(obj);
  };

  id = qs.parse(this.props.location.search.substr(1)).id;

  type = this.props.match.params.type;

  handleSubmit = e => {
    e.preventDefault();
    const { validateFields } = this.props.form;
    validateFields((err, value) => {
      if (err) return false;
      const data = {
        ...value,
      };
      if (this.type === 'edit') data.id = this.id;
      postSite(data).then(() => {
        this.props.history.push('/siteManager/site');
      });
    });
  };

  render() {
    const { type } = this.props.match.params;
    const title = type === 'add' ? '新增站台' : '站台编辑';
    const isView = type === 'view';
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: {
        span: 8,
      },
      wrapperCol: {
        span: 16,
      },
    };
    const { list } = this.state;

    return (
      <div>
        <Card title={title}>
          <Form onSubmit={this.handleSubmit} style={{ maxWidth: '500px' }}>
            <FormItem label="站台名" {...formItemLayout}>
              {!isView ? (
                getFieldDecorator('name', {
                  rules: [{ required: true }],
                })(<Input placeholder="请输入站台名" />)
              ) : (
                <span>{list.name}</span>
              )}
            </FormItem>

            <FormItem label="详细位置" {...formItemLayout}>
              {!isView ? (
                getFieldDecorator('detailAddress', {
                  rules: [{ required: true }],
                })(<Input placeholder="请输入详细位置……" />)
              ) : (
                <span>{list.detailAddress}</span>
              )}
            </FormItem>

            {/* <FormItem label="途径站点" {...formItemLayout}>
              {!isView ? (
                getFieldDecorator('busLine', {
                  rules: [{ required: true }],
                })(<TextArea rows="3" placeholder="请输入途径站点……" />)
              ) : (
                <span>{list.busLine}</span>
              )}
            </FormItem> */}

            <FormItem label="周边标志" {...formItemLayout}>
              {!isView ? (
                getFieldDecorator('aroundLogo', {
                  rules: [{ required: true }],
                })(<TextArea rows="3" placeholder="请输入周边标志……" />)
              ) : (
                <span>{list.aroundLogo}</span>
              )}
            </FormItem>

            {!isView && (
              <FormItem wrapperCol={{ offset: 8 }}>
                <Button type="primary" htmlType="submit">
                  提交
                </Button>
              </FormItem>
            )}
          </Form>
        </Card>
      </div>
    );
  }
}
